{% extends 'myadmin/base.html' %}

{%block style%}
    <link rel="stylesheet" type="text/css" href="/ueditor/UE/third-party/SyntaxHighlighter/shCoreDefault.css">
    <script type="text/javascript" src="/ueditor/UE/third-party/SyntaxHighlighter/shCore.js"></script>
    <script type="text/javascript" src="/ueditor/UE/ueditor.config.js"></script>
    <script type="text/javascript" src="/ueditor/UE/ueditor.all.min.js"></script>
    <script type="text/javascript" src="/ueditor/UE/lang/zh-cn/zh-cn.js"></script>

{%endblock%}
{%block body%}
<div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            Amaze UI 表单
        </div>
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">表单</a></li>
            <li class="am-active">Amaze UI 表单</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 添加商品
                </div>
                <div class="tpl-portlet-input tpl-fz-ml">
                    <div class="portlet-input input-small input-inline">
                        
                    </div>
                </div>


            </div>

            <div class="tpl-block">

                <div class="am-g">
                    <div class="tpl-form-body tpl-form-line">
                        <form action="{% url 'myadmin_editgoods' %}?gid={{goodsinfo.id}}" class="am-form tpl-form-line-form" method="post" enctype="multipart/form-data">
                        {% csrf_token %}


                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">商品标题
                                <span class="tpl-form-line-small-title">Title</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" name="gname" class="tpl-form-input" id="user-name" placeholder="请输入标题文字" value="{{ goodsinfo.gname }}">
                                </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">单价
                                <span class="tpl-form-line-small-title">Title</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" name="gprice" class="tpl-form-input" id="user-name" placeholder="请输入标题文字" value="{{ goodsinfo.gprice }}">
                                </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">库存
                                <span class="tpl-form-line-small-title">Title</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" name="gordernum" class="tpl-form-input" id="user-name" placeholder="请输入标题文字" value="{{ goodsinfo.gordernum }}">
                                </div>
                        </div>




                        <div class="am-form-group">
                            <label for="user-weibo" class="am-u-sm-3 am-form-label">商品图片
                                <span class="tpl-form-line-small-title">Images</span></label>
                            <div class="am-u-sm-9">
                                <div class="am-form-group am-form-file">
                                    <div class="tpl-form-file-img">
                                        <img src="" id="img" alt="" width="100"></div>
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i>添加封面图片</button>
                                    <input id="doc-form-file" class="files" name="gimgurl" type="file" multiple=""></div>
                            </div>
                        </div>



                            <div class="am-form-group">
                                <label for="user-intro" class="am-u-sm-3 am-form-label">商品简介</label>
                                <div class="am-u-sm-9">
                                    
                                    <script id="editor" name="ginfo" type="text/plain" style="height:500px;color:#000;">
                                    {{ginfo}}
                                    </script>
                                </div>
                            </div>


                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <button  class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button></div>
                        </div>
                    </form>

                    </div>
                </div>
            </div>


        </div>

    </div>
{%endblock%}
{%block script%}
                        <script type="text/javascript">
                             // 获取元素对象
                            // var inp = document.getElementById('files');
                            // var imgs = document.getElementById('img');
                             // 给inp添加change时间
                            $('.files').change(function(){
                                    console.log('0')
                                    // 读取原始文件
                                    file = this.files[0];

                                    var readers = new FileReader();
                                    // 读取文件
                                    readers.readAsDataURL(file)

                                    // 当文件读取完成执行获取新的url地址
                                    readers.onload=function(){

                                        $('#img').attr('src',readers.result)
                                    }
                                }
                            )

                          // 副文本编辑器
var ue = UE.getEditor('editor');
SyntaxHighlighter.all();
                        </script>
{%endblock%}